<template>
  <div class="top">
    <center>
      <div class="center">
        <div class="left">
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1382070510,2765738169&fm=26&gp=0.jpg" alt="">
        </div>
        <div class="right">
          <van-button type="info" @click="fn4">点击登录</van-button>
        </div>
      </div>
      <div class="top_center">今日特价</div>
      <ul class="center_top">
        <li>
          <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
          <p>待付款</p>
        </li>
        <li>
          <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
          <p>待发货</p>
        </li>
        <li>
          <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
          <p>代发货</p>
        </li>
        <li>
          <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
          <p>待评价</p>
        </li>
      </ul>
      <div>
        <van-grid :column-num="3">
          <van-grid-item icon="stop" text="我的余额" />
          <van-grid-item icon="lock" text="我的砍价" />
          <van-grid-item icon="photo-o" text="我的礼卷" />
        </van-grid>
        <van-grid :column-num="3">
          <van-grid-item icon="alipay" text="我的收藏" />
          <van-grid-item icon="photo-o" text="我的地址" />
          <van-grid-item icon="photo-o" text="联系客服" />
        </van-grid>
      </div>
    </center>
  </div>
</template>
<script>
import center from "../../components/center/center";
export default {
  data() {
    return {
      active: 0,
    };
  },
  components: {
    center,
  },
  methods:{
    fn4(){
      this.$router.push('/loading')
    }
  }
};
</script>
<style lang="scss">
// .top {
//   background: rgb(201, 175, 175);
// }
.center {
  width: 100%;
  height: 30vh;
  background: rgb(157, 209, 159);
  display: flex;
  .left{
 width: 40vw;
 display: flex;
 justify-content: center;
 align-items: center;
 img{
     width: 5rem;
     height: 5rem;
     border-radius: 50%;
 }
  }
  .right{
      width: 60vw;
    display: flex;
    align-items: center;
  }
}
.top_center {
  width: 100%;
  height: 10vh;
  background: #fff;
  text-align: center;
}
.center_top {
  width: 100%;
  height: 10vh;
  display: flex;
  justify-content: space-around;
}
</style>